<template>
  <div class="commentWrap">
     <ParentComment
        v-if="commentData.parent"
        :commentData="commentData.parent"
      />
    <el-row class="cmt-info" justify="space-between" align="middle">
      <el-col :span="23">
        <img
          :src="$axios.defaults.baseURL + commentData.account.defaultAvatar"
        />
        <span>{{ commentData.account.nickname }}</span>
        <span>{{ commentData.created_at }} </span>
      </el-col>
      <el-col :span="1">{{ commentData.level }}</el-col>
    </el-row>

    <el-row
      class="cmt-content"
      @mouseenter.native="isShow = true"
      @mouseleave.native="isShow = false"
    >
      <el-row class="cmt-message">
        <p>{{ commentData.content }}</p>
      </el-row>
      <el-row class="cmt-pic" v-if="commentData.pics.length > 0">
        <img :src="$axios.defaults.baseURL + commentData.pics[0].url" alt="" />
      </el-row>
      <el-row class="cmt-reply">
        <span @click="reply" v-if="isShow">回复</span>
      </el-row>
     
    </el-row>
  </div>
</template>

<script>
export default {
  props: ["commentData"],
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    reply() {
      this.$store.commit("comment/changeId", {
        id: this.commentData.id,
        name: this.commentData.account.nickname,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.commentWrap {
  padding: 20px 20px 5px;
  border-bottom: 1px dashed #ddd;
  background-color: rgb(253, 249, 241);
  .cmt-info {
    font-size: 12px;
    color: #666;
    img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
    }
  }
  .cmt-content {
    padding-left: 30px;
    .cmt-message {
      padding-top: 10px;
    }
    .cmt-pic {
      width: 80px;
      height: 80px;
      padding: 5px;
      margin-top: 10px;
      margin-right: 5px;
      border-radius: 6px;
      border: 1px dashed #ddd;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .cmt-reply {
      text-align: right;
      font-size: 12px;
      line-height: 20px;
      height: 20px;
      color: #1e50a2;
      span {
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
}
</style>